/*************** 棋盘--长方体 ****************/
.checkerboard-cuboid {
    width: 534px;
    height: 534px;
    position: relative;
    color: #FFF;
    /*transform-style: preserve-3d;*/
    /*transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg);*/
}
/*设置六面的视角*/
.checkerboard-cuboid div {
    position: absolute;
}
.checkerboard-cuboid .front {
    width: 534px;
    height: 534px;
    /*transform: rotateX(90deg) translateZ(267px);*/
    background-image: linear-gradient(0deg, #252C4C 0%, #3F4A7F 100%);
}
.checkerboard-cuboid .top {
    width: 534px;
    height: 15px;
    transform: rotateX(90deg);
    background-image: linear-gradient(-90deg, #13172C 0%, #11152A 100%);
}
.checkerboard-cuboid .bottom {
    width: 534px;
    height: 15px;
    transform: rotateX(90deg) translateY(-267px);
    background-image: linear-gradient(0deg, #13172C 0%, #11152A 100%);
}
.checkerboard-cuboid .back {
    width: 534px;
    height: 534px;
    transform: translateZ(-15px);
    background: linear-gradient(-180deg, #3F4A7F 0%, #252C4C 95%);
}
.checkerboard-cuboid .left {
    width: 534px;
    height: 15px;
    transform: rotateY(90deg) translateZ(267px);
    background: linear-gradient(-180deg, #232739 0%, #212537 95%);
}
.checkerboard-cuboid .right {
    width: 534px;
    height: 15px;
    transform: rotateY(90deg) translateZ(-267px);
    background-image: linear-gradient(-90deg, #13172C 0%, #11152A 100%);
}


/****************场景--长方体***************/
.scene-cuboid {
    width: 54px;
    box-sizing: border-box;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg);
    transition: min-height 0.4s linear;
}
.scene-cuboid div {
    position: absolute;
}
/*设置六面的视角*/
.scene-cuboid .front {
    width: 54px;
    transform: translateZ(27px);
    background-image: linear-gradient(90deg, #A2CBFE 0%, #85C6F8 100%);
}
.scene-cuboid .bottom {
    width: 54px;
    height: 54px;
    transform: rotateX(90deg) translateZ(-27px);
    background: linear-gradient(-180deg, #E2F2FF 0%, #D9F0FF 95%);
}
.scene-cuboid .back {
    width: 54px;
    transform: translateZ(-27px);
    background: linear-gradient(-180deg, #E2F2FF 0%, #D9F0FF 95%);
}
.scene-cuboid .top {
    width: 54px;
    height: 54px;
    transform: rotateX(90deg) translateZ(81px);
    background-image: linear-gradient(-180deg, #E2F2FF 0%, #D9F0FF 95%);
}
.scene-cuboid .left {
    width: 54px;
    transform: rotateY(90deg) translateZ(27px);
    background: linear-gradient(-180deg, #E2F2FF 0%, #D9F0FF 95%);
}
.scene-cuboid .right {
    width: 54px;
    transform: rotateY(90deg) translateZ(-27px);
    background-image: linear-gradient(-90deg, #B8DDFF 0%, #BCD6F6 100%);
}
.scene-cuboid .front,
.scene-cuboid .back,
.scene-cuboid .left,
.scene-cuboid .right {
    min-height: 54px;
    bottom: 0;
    transition: min-height 0.4s linear;
}
.scene-cuboid .bottom {
    bottom: 0;
    transition: transform 0.4s linear;
}

/*************绿色会跳指示--正方体*************/
.jump-cuboid {
    height: 10px;
    width: 10px;
    box-sizing: border-box;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg);
    transition: all 3s ease-in-out;
}
.jump-cuboid.scale {
    transform: scale(2) rotateX(-35deg) rotateY(45deg) rotateZ(0deg);
}
/*设置六面的视角*/
.jump-cuboid .front,
.jump-cuboid .bottom,
.jump-cuboid .back,
.jump-cuboid .top,
.jump-cuboid .left,
.jump-cuboid .right {
    width: 10px;
    height: 10px;
    position: absolute;
}
.jump-cuboid .front {
    transform: translateZ(5px);
    background: #FFB05D;
}
.jump-cuboid .bottom {
    transform: rotateX(90deg) translateZ(-5px);
    background: #FFB05D;
}
.jump-cuboid .back {
    transform: translateZ(-5px);
    background: #FFC9A3;
}
.jump-cuboid .top {
    transform: rotateX(90deg) translateZ(5px);
    background: #FFC9A3;
}
.jump-cuboid .left {
    transform: rotateY(90deg) translateZ(5px);
    background: #FFC9A3;
}
.jump-cuboid .right {
    transform: rotateY(90deg) translateZ(-5px);
    background: #FF9346;
}

/************ 棋盘动画模块 ************/
.process-introduction {
    height: 780px;
}
.process-introduction .btn-free-trial {
    position: absolute;
    right: 50px;
    bottom: 50px;
}
.process-bg {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.process-bg.blue {
    bottom: 65px;
    height: 370px;
}
.process-bg.white {
    bottom: 0;
    height: 240px;
}
.checkerboard {
    width: 758px;
    height: 467px;
    margin: 0 auto;
    margin-top: 127px;
    position: relative;
    background-image: url(../images/checkerboard-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 754px auto;
    z-index: 2;
}
/* 考试 */
.checkerboard .item-exam {
    width: 152px;
    height: 87.5px;
    background-position: -3px -3px;
    background-size: auto 96px;
    background-image: url(../images/img-index-process-bg.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 310px;
    top: 170px;
}
.checkerboard .item-exam .cuboid {
    width: 116px;
    height: 163px;
    position: relative;
    bottom: 73px;
    left: 18px;
    z-index: 3;
}
.checkerboard .item-exam .icon {
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 119px;
    left: 64px;
    z-index: 4;
    background-image: url(../images/icon-process.png);
    background-repeat: no-repeat;
    background-size: auto 60px;
    background-position: 0 0;
}
.checkerboard .item-exam .item-name {
    font-size: 16px;
    color: #FFF;
    text-align: center;
    position: absolute;
    bottom: 150px;
    left: 60px;
}
/* 结束的icon */
.checkerboard .item-end {
    width: 92px;
    height: 59px;
    position: absolute;
    background-position: -163px -5px;
    background-size: auto 96px;
    background-image: url(../images/img-index-process-bg.png);
    background-repeat: no-repeat;
    left: 208px;
    top: 264px;
}
/*白色的方块棋子*/
.checkerboard .item {
    position: absolute;
}
.checkerboard .item .item-info {
    position: absolute;
    bottom: 35px;
    left: 15px;
    z-index: 99;
    transition: bottom 0.4s linear;
}
.checkerboard .item .item-info .item-icon {
    width: 25px;
    height: 60px;
    background-image: url(../images/icon-process.png);
    background-repeat: no-repeat;
    background-size: auto 60px;
}
.checkerboard .item .item-info .item-icon.exercise {
    background-position: -162px bottom;
    width: 28px;
}
.checkerboard .item .item-info .item-icon.course {
    background-position: -80px bottom;
}
.checkerboard .item .item-info .item-icon.live {
    background-position: -135px bottom;
}
.checkerboard .item .item-info .item-icon.application {
    background-position: -52px bottom;
}
.checkerboard .item .item-info .item-icon.pay {
    background-position: -108px 2px;
}
.checkerboard .item .item-info .item-icon.certificate {
    background-position: -27px bottom;
}
/* 白色棋子上的文字 */
.checkerboard .item .item-info .item-name {
    font-size: 16px;
    color: #3B426B;
    text-align: center;
    width: 64px;
    margin-left: -20px;
    margin-bottom: 4px;
}
.checkerboard .item.exercise .item-info .item-name {
    color: #FFF;
}

/* 提示 */
.checkerboard .item-info .item-tip {
    width: 400px;
    height: 200px;
    position: absolute;
    left: -430px;
    top: -100px;
    z-index: 999;
    display: none;
}
.checkerboard .right .item-info .item-tip {
    left: 50px;
}
.checkerboard .right .item-info .item-tip .tip-box {
    right: 0;
}
.checkerboard .item-info .item-tip .tip-box {
    width: 300px;
    background: #FFFFFF;
    box-shadow: 0 5px 30px 0 rgba(58,62,81,0.10);
    border-radius: 4px;
    padding: 20px;
    position: absolute;
    bottom: 30px;
    z-index: 2;
}
.checkerboard .item-info .item-tip .tip-border {
    width: 250px;
    height: 30px;
    border-left: 1px dashed #3778FD;
    border-bottom: 1px dashed #3778FD;
    position: absolute;
    right: 0;
    bottom: 0;
}
.checkerboard .right .item-info .item-tip .tip-border {
    border-left: 0;
    border-right: 1px dashed #3778FD;
    border-bottom: 1px dashed #3778FD;
    left: 0;
}
.checkerboard .item-info .tip-title {
    font-size: 18px;
    color: #176EFB;
    line-height: 27px;
    font-weight: 500;
}
.checkerboard .item-info .tip-detail {
    font-size: 14px;
    color: #30385E;
    line-height: 20px;
    margin-top: 5px;
}

/* 报名 */
.checkerboard .application .item-info .item-tip {
    top: -70px;
}

/* 每日学练 */
.checkerboard .exercise .item-info .item-tip {
    width: 0;
    top: -50px;
}
.checkerboard .exercise .item-info .item-tip .tip-box {
    bottom: 150px;
    left: 200px;
}
.checkerboard .exercise .item-info .item-tip .tip-border {
    width: 350px;
    height: 150px;
}

/* 考试的 */
.checkerboard .item-exam .item-info .item-tip {
    width: 600px;
    left: 115px;
    top: -170px;
}
.checkerboard .item-exam .item-tip .tip-border {
    width: 450px;
    height: 60px;
}
.checkerboard .item-exam .item-tip .tip-box {
    width: 300px;
    bottom: 60px;
}
/* 自定义任务 */
.checkerboard .item-end .item-info .item-tip {
    width: 600px;
    left: -560px;
    top: -170px;
}
.checkerboard .item-end .item-tip .tip-border {
    width: 450px;
    height: 60px;
}
.checkerboard .item-end .item-tip .tip-box {
    width: 300px;
    bottom: 60px;
}

/* 小屏幕上的提示位置 */
@media (max-width: 1405px) {
    .checkerboard .small .item-info .item-tip {
        width: 300px;
        left: -330px;
    }
    .checkerboard .small .item-info .item-tip .tip-box {
        left: -50px;
    }
    .checkerboard .small .item-info .tip-border {
        width: 200px;
    }

    .checkerboard .small.right .item-info .item-tip {
        left: 50px;
    }
    .checkerboard .small.right .item-info .tip-box {
        left: auto;
        right: -50px;
    }

    /* 自定义任务 */
    .checkerboard .small.item-end .item-info .item-tip {
        left: -270px;
    }
    .checkerboard .small.item-end .item-info .item-tip .tip-box {
        left: -150px;
    }
    .checkerboard .small.item-end .item-info .tip-border {
        width: 300px;
    }
}

@media (max-width: 1305px) {
    .checkerboard .small .item-info .item-tip .tip-box {
        left: 0;
    }
    .checkerboard .small .item-info .tip-border {
        width: 150px;
    }
    .checkerboard .small.right .item-info .item-tip {
        left: 50px;
    }
    .checkerboard .small.right .item-info .tip-box {
        left: auto;
        right: 0;
    }

    /* 每日学练 */
    .checkerboard .exercise .item-info .item-tip .tip-box {
        left: 130px;
    }
    .checkerboard .exercise .item-info .item-tip .tip-border {
        width: 280px;
    }

    /* 自定义任务 */
    .checkerboard .small.item-end .item-info .item-tip {
        width: 0;
    }
    .checkerboard .small.item-end .item-info .item-tip .tip-box {
        left: -150px;
    }
    .checkerboard .small.item-end .item-info .tip-border {
        width: 300px;
        left: 0;
    }
}
/* 动画 */
.pc .checkerboard .item:hover .item-info,
.checkerboard .item.active .item-info {
    bottom: 70px;
}
.pc .checkerboard .item:hover .scene-cuboid .front,
.pc .checkerboard .item:hover .scene-cuboid .back,
.pc .checkerboard .item:hover .scene-cuboid .left,
.pc .checkerboard .item:hover .scene-cuboid .right,
.checkerboard .item.active .scene-cuboid .front,
.checkerboard .item.active .scene-cuboid .back,
.checkerboard .item.active .scene-cuboid .left,
.checkerboard .item.active .scene-cuboid .right {
    min-height: 96px;
}
.pc .checkerboard .item:hover .item-info .item-tip,
.pc .checkerboard .item-exam:hover .item-info .item-tip,
.pc .checkerboard .item-end:hover .item-info .item-tip,
.checkerboard .item.active .item-info .item-tip,
.checkerboard .item-exam.active .item-info .item-tip,
.checkerboard .item-end.active .item-info .item-tip {
    display: block;
}

.checkerboard ul {
    position: relative;
    width: 100%;
    height: 100%;
}
.checkerboard .road-line {
    width: 16px;
    height: 180px;
    position: absolute;
    /*padding-top: 20px;*/
}
.checkerboard .road-line-down {
    transform: rotate(-60deg) skewY(30deg);
}
.checkerboard .road-line-up {
    transform: rotate(120deg) skewY(30deg);
}
.checkerboard .road-line-right {
    transform: rotate(-120deg) skewY(-30deg);
}
.checkerboard .road-line-left {
    transform: rotate(60deg) skewY(-30deg);
}
/*  灰色虚线  */
.checkerboard .road-line .border-gray-box {
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}
.checkerboard .road-line .border-gray {
    width: 0;
    height: calc(100% - 20px);
    margin: 0 auto;
    border-left: 1px dashed #9BBBFE;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}
/* 走过的路样式 */
.checkerboard .road-line .active {
    width: 100%;
    height: 0;
    background: #3767FE;
}
.checkerboard .road-line .active .border-blue {
    width: 0px;
    height: 100%;
    margin: 0 auto;
    border-left: 1px dashed #FFC9A3;
}

.exam-exercise {
    left: 448px;
    top: 164px;
}
.exercise-course {
    left: 588px;
    top: 165px;
}
.course-live {
    left: 588px;
    top: 84px;
}
.live-application {
    left: 449px;
    top: 4px;
}
.application-pay {
    left: 308px;
    top: 4px;
}
.pay-certificate {
    left: 169px;
    top: 84px;
}
.certificate-end {
    left: 170px;
    top: 164px;
}
.corner-down {
    left: 311px;
    top: 245px;
}
.corner-right {
    left: 450px;
    top: 245px;
}
.exam-pay {
    left: 309px;
    top: 84px;
}
.exam-live {
    left: 449px;
    top: 84px;
}
.exam-end {
    left: 309px;
    top: 165px;
}

.scene-cuboid {
    z-index: 2;
}
.item.exercise {
    right: 201px;
    bottom: 173px;
}
.item.course {
    right: 65px;
    bottom: 253px;
}
.item.live {
    right: 201px;
    bottom: 333px;
}
.item.application {
    right: 340px;
    bottom: 410px;
}
.item.pay {
    left: 227px;
    bottom: 333px;
}
.item.certificate {
    left: 89px;
    bottom: 255px;
}

/*绿色游动的小棋子*/
.jump-cuboid {
    position: absolute;
    left: 243px;
    top: 285px;
}